import { css } from '@emotion/react';
import { useInViewport } from 'ahooks';
import { theme as antdTheme } from 'antd';
import cs from 'classnames';
import { PropsWithChildren, useRef } from 'react';
import { createPortal } from 'react-dom';

export default function TabBarWrapper(props: PropsWithChildren) {
  const ref = useRef<HTMLDivElement>(null);
  const [inViewport] = useInViewport(ref, {
    rootMargin: '-64px',
  });

  const { hashId } = antdTheme.useToken();

  return (
    <div ref={ref}>
      {!inViewport && document.querySelector('#header-content')
        ? createPortal(
          <div
            className={cs('ant-tabs', 'ant-tabs-top', hashId)}
            css={css`
                height: 100%;
                color: #fff;

                .ant-tabs-nav-wrap {
                }

                .ant-tabs-nav {
                  margin-bottom: 0;
                  height: 100%;
                  &:before {
                    border-bottom: none;
                  }
                }

                .ant-tabs-nav-list {
                }

                .ant-tabs-tab {
                  padding: 0 8px;
                  color: #fff;
                  white-space: normal;
                  width: 76px;

                  &.ant-tabs-tab-active {
                    background: rgba(255, 255, 255, 0.3);
                  }
                }

                .ant-tabs-tab + .ant-tabs-tab {
                  margin-left: 0;
                }

                .ant-tabs-ink-bar {
                  height: 4px !important;
                  top: 0;
                  bottom: unset !important;
                }

                .ant-tabs-nav-operations-hidden {
                  display: none;
                }

                .ant-tabs-nav-operations {
                  display: none;
                }
              `}
          >
            {props.children}
          </div>,
          document.querySelector('#header-content')!,
        )
        : props.children}
    </div>
  );
}
